<template>
  <div class="prs-product-box" v-loading="loading">
    <el-form
      ref="fmData"
      :model="fmData"
      :rules="rules"
      v-if="fmData !== undefined && fmData !== null"
    >
      <div class="purchas-content">
        <el-card class="box-card">
          <div slot="header" class="unfold-way" style="height: 32px">
            <p>生产报工单</p>

            <div class="button-plan" v-if="option.btnStatus">
              <span
                v-if="billFmData.invoiceStatus == '1' && fmData.prsCode == ''"
              >
                <el-button
                  @click="btnAdd()"
                  plain
                  type="primary"
                  v-hasPermi="['prs:product:entity:add']"
                  :disabled="billFmData.invoiceStatus !== '1'"
                >
                  新增</el-button
                >
              </span>
              <span v-if="fmData.prsCode !== ''">
                <el-button
                  v-hasPermi="['prs:product:import']"
                  type="warning"
                  plain
                  :disabled="
                    fmData.prsCode == '' ||
                    fmStatus == 'seeStatus' ||
                    billFmData.invoiceStatus !== '1'
                  "
                  icon="el-icon-download"
                  @click="objFilling.operateView()"
                >
                  引入</el-button
                >
              </span>
              <span v-if="billFmData.invoiceStatus == '1' && fmStatus == ''">
                <el-button type="primary" disabled>保存 </el-button>
              </span>
              <span v-if="fmStatus == 'updateStatus'">
                <el-button
                  type="primary"
                  @click="btnSave(fmData)"
                  :disabled="
                    fmStatus !== 'updateStatus' ||
                    billFmData.invoiceStatus !== '1'
                  "
                  v-hasPermi="['prs:product:entity:edit']"
                  >保存
                </el-button>
                <el-button type="succes" @click="btnUndo">撤回</el-button>
              </span>
              <span v-if="fmStatus == 'addStatus'">
                <el-button
                  type="primary"
                  v-hasPermi="['prs:product:entity:add']"
                  @click="btnNew(fmData)"
                  :disabled="
                    fmData.prsCode == '' ||
                    fmData.prsProcessCode == '' ||
                    billFmData.invoiceStatus !== '1'
                  "
                  >保存</el-button
                >
              </span>

              <span>
                <el-button
                  type="succes"
                  v-if="fmStatus == 'seeStatus'"
                  v-hasPermi="['prs:product:entity:edit']"
                  @click="btnEdit"
                  :disabled="
                    fmData.invoiceStatus == '1' ||
                    fmStatus !== 'seeStatus' ||
                    billFmData.invoiceStatus !== '1'
                  "
                  >编辑</el-button
                >

                <el-button
                  type="success"
                  v-hasPermi="['prs:product:permit']"
                  @click="btnCheck"
                  :disabled="
                    fmStatus !== 'seeStatus' ||
                    fmData.invoiceStatus == '1' ||
                    fmData.invoiceStatus == '2' ||
                    billFmData.invoiceStatus !== '1'
                  "
                >
                  审核</el-button
                >
                <el-button
                  type="info"
                  v-hasPermi="['prs:product:revoke']"
                  @click="btnUnCheck"
                  :disabled="
                    fmStatus !== 'seeStatus' ||
                    fmData.invoiceStatus == '0' ||
                    fmData.invoiceStatus == '2' ||
                    billFmData.invoiceStatus !== '1'
                  "
                  >反审核
                </el-button>
              </span>
            </div>
          </div>
          <div class="info-table">
            <div class="table-data">
              <el-table
                :data="fmData.prsYieldSalveList"
                border
                :height="tableHeight"
                row-key="id"
                default-expand-all
                style="width: 100%"
                ref="tableClums"
              >
                <template slot="empty">
                  <span></span>
                </template>
                <el-table-column type="index" width="40" label="序号" :key="1">
                </el-table-column>
                <el-table-column label="工序代码" width="180">
                  <template slot-scope="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.sectionCode" disabled>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="工序名称" width="230">
                  <template slot-scope="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.sectionName" disabled>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="标准工时" width="120">
                  <template slot-scope="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.duration" disabled>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="是否质检" width="120">
                  <template slot-scope="scope">
                    <el-form-item>
                      <span v-if="scope.row.isQuality == '1'">是</span>
                      <span v-else>否</span>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="计件方式" width="120">
                  <template slot-scope="scope">
                    <el-form-item>
                      <span v-if="scope.row.countType == '0'">班组</span>
                      <span v-else>个人</span>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column label="工人姓名">
                  <template slot-scope="scope">
                    <el-form-item>
                      <div class="select-box">
                        <div class="select-name">
                          <span class="name-s">{{
                            scope.row.workersNames
                          }}</span>
                          <el-link
                            @click="objFilling.btnWorker(scope.$index)"
                            type="primary"
                            v-if="
                              fmStatus == 'addStatus' ||
                              fmStatus == 'updateStatus'
                            "
                          >
                            选择</el-link
                          >
                        </div>
                      </div>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="实际工时" width="150">
                  <template slot-scope="scope">
                    <el-form-item>
                      <el-input
                        v-model="scope.row.useDuration"
                        :disabled="option.disabledInput"
                      >
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="quantity" label="完工数量" width="150">
                  <template slot-scope="scope">
                    <el-form-item
                      class="text-right"
                      :prop="'prsYieldSalveList.' + scope.$index + '.quantity'"
                      :rules="rules.quantity"
                    >
                      <el-input
                        v-model="scope.row.quantity"
                        :disabled="option.disabledInput"
                        @change="
                          objUtils.formatDecimal(scope.$index, scope.row)
                        "
                        style="text-align: right"
                      >
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="badQuantity"
                  label="报损数量"
                  width="150"
                  :key="18"
                >
                  <template slot-scope="scope">
                    <el-form-item class="text-right">
                      <el-input
                        v-model="scope.row.badQuantity"
                        :disabled="option.disabledInput"
                        @change="
                          objUtils.formatDecimal(scope.$index, scope.row)
                        "
                        style="text-align: right"
                      >
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="120"
                  v-if="fmStatus == 'addStatus' || fmStatus == 'updateStatus'"
                  :key="16"
                >
                  <template slot-scope="scope">
                    <div class="operation-btn">
                      <el-link
                        type="success"
                        plain
                        @click="objFilling.handleCopy(scope.row)"
                        >复制
                      </el-link>
                      &nbsp;
                      <el-link
                        type="danger"
                        plain
                        @click="objFilling.deleteList(scope.$index)"
                        >删除
                      </el-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </el-form>

    <!-- 选择工人 -->
    <selectWorker
      :selectWorkerDialog="stack.workerStatus"
      v-if="stack.workerStatus"
      :workType="billFmData.workType"
      @selectWorkerClose="objFilling.selectWorkerClose()"
      @handleWorkerSuccess="objFilling.handleWorkerSuccess(arguments)"
    />

    <!-- 选择工艺路线 -->
    <selectProcess
      :selectProcessDialog="stack.processStatus"
      @handleAllSuccess="objFilling.handleAllSuccess($event)"
      @handleProcessSelect="objFilling.handleProcessSelect(arguments)"
      v-if="stack.processStatus"
      :key="stack.processKey"
      :detailCode="fmData.prsProcessCode"
      @selectProcessClose="objFilling.selectProcessClose()"
    />
  </div>
</template>

<script>
//接口
import {
  addBillYield, //新增单据
  seeBillYield, //查看单据
  updateBillYield, //更新单据
  examineBillYield, //审核单据
  examineDeBillYield, //反审核单据
} from "../../api/product";
//并行请求
import axios from "axios";
//输入是否为数字效验
import { isAccord } from "@/utils/cingsoft";
//选择工人
import selectWorker from "./selectWorker.vue";
//标准工序
import selectProcess from "./selectProcess";

export default {
  data() {
    // 数量输入效验
    var checkOutQuantity = (rule, value, callback, param) => {
      if (!value) {
        return callback(new Error(""));
      }
      if (!isAccord(value)) {
        callback(new Error(""));
      } else {
        callback();
      }
    };
    return {
      // 遮罩层
      loading: false,

      //表单状态-addStatus:新增状态,seeStatus:查看状态,updateStatus:编辑状态
      fmStatus: "",

      //数据表单
      fmData: {
        prsCode: "", //单据编码
        invoiceDate: new Date(), //单据日期
        invoiceStatus: "0", //单据状态
        prsOrderCode: "",
        prsProcessCode: "",
        prsProcessName: "",
        prsYieldSalveList: [],
      },

      //选项
      option: {
        //按钮是否显示
        btnStatus: false,
        //输入框是否禁用
        disabledInput: false,
      },

      //执行中
      stack: {
        //工人
        workerStatus: false,
        //工艺路线
        processKey: 0,
        processStatus: false,
      },
      objUtils: this.classUtils(), //工具
      objFilling: this.classFilling(), //选择

      rules: {
        quantity: [
          {
            validator: checkOutQuantity,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    // 主单据数据
    billFmData: {
      type: Object,
      default() {
        return {};
      },
    },
    //主单据配置
    fmConfig: {
      type: Object,
      defaulut() {
        return {
          decimalQuantity: "2", //数量小数位数
          decimalPrice: "2", //数量小数位数
          attrMerge: "false", //规格合并
          attrAlias: "型号规格", //规格别名
          sortArrId: [], //料品大类
          feature: "", //物料特性
          fieldHiding: [], //隐藏字段
          warehouses: "", //仓库
        };
      },
    },
    //主信息高度
    tableHeight: {
      type: Number,
      default: null,
    },
  },

  created() {
    //初始化页面
    this.Initial();
  },

  methods: {
    Initial() {
      seeBillYield({
        prsCode: this.billFmData.prsCode,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.fmData = res.data;
            this.fmStatus = "seeStatus";
            this.option.btnStatus = true;
            this.objUtils.getDecimal();
            //表格防抖动
            this.$nextTick(() => {
              this.$refs["tableClums"].doLayout();
            });
            if (this.fmStatus == "seeStatus") {
              this.option.disabledInput = true;
            } else {
              this.option.disabledInput = false;
            }
          } else {
            this.fmStatus = "addStatus";
            this.option.btnStatus = true;
          }
        }
      });
    },

    //确定新增
    btnNew(fmData) {
      if (fmData && fmData.prsYieldSalveList.length == 0) {
        this.msgError("请引入工艺路线");
        return;
      }
      this.$refs.fmData.validate((valid) => {
        if (valid) {
          fmData.invoiceDate = this.parseTime(fmData.invoiceDate);
          addBillYield(fmData)
            .then((res) => {
              this.msgSuccess("新增成功");
              this.fmStatus = "seeStatus";
              this.option.disabledInput = true;
              this.fmData = res.data;
              this.$nextTick(() => {
                this.$refs["tableClums"].doLayout();
              });
              this.objUtils.getDecimal();
            })
            .catch((err) => {
              this.msgError("新增失败");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 更新保存
    btnSave(fmData) {
      if (fmData && fmData.prsYieldSalveList.length == 0) {
        this.msgError("请引入工艺路线");
        return;
      }
      this.$refs.fmData.validate((valid) => {
        if (valid) {
          fmData.invoiceStatus = "0";
          fmData.invoiceDate = this.parseTime(fmData.invoiceDate);
          updateBillYield(fmData)
            .then((res) => {
              this.msgSuccess("更新成功");
              this.fmStatus = "seeStatus";
              this.option.disabledInput = true;
              this.fmData = res.data;
              this.$nextTick(() => {
                this.$refs["tableClums"].doLayout();
              });

              this.objUtils.getDecimal();
            })
            .catch((err) => {
              this.msgError("更新失败");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //查看->编辑
    btnEdit() {
      this.option.disabledInput = false;
      this.fmStatus = "updateStatus";
      this.$nextTick(() => {
        //切换，重新渲染表格防止抖动
        this.$refs["tableClums"].doLayout();
      });
    },

    //新增->赋值主表
    btnAdd() {
      this.fmData.prsCode = this.billFmData.prsCode;
      this.fmData.prsOrderCode = this.billFmData.woCode;
      this.fmData.prsProcessCode = this.billFmData.prsProcessCode;
      this.fmData.prsProcessName = this.billFmData.prsProcessName;
      this.msgSuccess("生成报工单成功，请引入工艺路线");
    },

    //撤回
    btnUndo() {
      this.option.disabledInput = true; //是否可编辑
      this.workStatus = true;
      this.fmStatus = "seeStatus";
      this.$nextTick(() => {
        //切换，重新渲染表格防止抖动
        this.$refs["tableClums"].doLayout();
      });
      this.option.disabledInput = true;
    },

    //审核
    btnCheck() {
      examineBillYield([
        {
          prsCode: this.fmData.prsCode,
        },
      ]).then((res) => {
        if (res.code == 200) {
          this.fmData.invoiceStatus = "1";
          this.fmData.checkDate = res.data.checkDate;
          this.fmData.userCheck = res.data.userCheck;
          this.$store.dispatch("productionStatus/setProductRefresh", true);
          this.msgSuccess("审核成功");
        }
      });
    },

    //反审核
    btnUnCheck() {
      this.$confirm("确定撤销审核", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return examineDeBillYield([
            {
              prsCode: this.fmData.prsCode,
            },
          ]);
        })
        .then((res) => {
          if (res.code == 200) {
            this.fmData.invoiceStatus = "2";
            this.fmData.checkDate = "";
            this.fmData.userCheck = "";
            this.$store.dispatch("productionStatus/setProductRefresh", true);
            this.msgSuccess("撤销成功");
          }
        });
    },

    // 选择
    classFilling() {
      const self = this;
      return {
        //引入工艺路线
        operateView() {
          self.stack.processStatus = true;
          self.stack.processKey = Math.random();
          console.log(self.stack.processStatus);
        },

        handleProcessSelect(data) {
          let selectObj = {
            sectionCode: data[0].code,
            sectionName: data[0].name,
            duration: data[0].duration,
            useDuration: data[0].duration,
            badQuantity: 0,
            quantity: self.billFmData.invQuantity,
            isQuality: data[0].isQuality,
            countType: data[0].countType,
            workersIds: "",
            workersNames: "",
            remarks: "", //备注
          };

          if (data[1] == false) {
            // 更新表单数据
            self.fmData.prsYieldSalveList.push({ ...selectObj });
            self.stack.processStatus = false;
          } else {
            self.fmData.prsYieldSalveList.push({ ...selectObj });
          }
          self.objUtils.getDecimal();
        },

        //全选成功
        handleAllSuccess(list) {
          this.handdleAddImport(list).then((arr) => {
            let successList = JSON.parse(JSON.stringify(list));
            if (successList.length > 0) {
              for (let i = 0; i < successList.length; i++) {
                arr[i].sectionCode = successList[i].code;
                arr[i].sectionName = successList[i].name;
                arr[i].duration = successList[i].duration;
                 arr[i].useDuration = successList[i].duration;
                arr[i].isQuality = successList[i].isQuality;
                arr[i].countType = successList[i].countType;
                arr[i].badQuantity = 0;
                arr[i].quantity = self.billFmData.invQuantity;
              }
            }
            self.fmData.prsYieldSalveList.push(...arr);
            self.objUtils.getDecimal();
            self.stack.processStatus = false;
          });
        },
        handdleAddImport(list) {
          return new Promise((resolve, reject) => {
            let processDate = {
              sectionCode: "",
              sectionName: "",
              duration: "",
              useDuration: "",
              quantity: "",
              badQuantity: "",
              isQuality: "",
              countType: "",
              workersIds: "",
              workersNames: "",
              remarks: "", //备注
            };
            let successList = JSON.parse(JSON.stringify(list)),
              formProcess = []; //赋值信息
            successList.forEach((item, i) => {
              formProcess.push({
                ...processDate,
              });
            });
            resolve(formProcess);
          });
        },

        //工艺路线关闭
        selectProcessClose() {
          self.stack.processStatus = false;
        },

        //工人/选择
        btnWorker(index) {
          self.stack.rowIndex = index;
          console.log(self.stack.rowIndex);
          self.stack.workerStatus = true;
        },
        //工人/选择成功
        handleWorkerSuccess(list) {
          self.fmData.prsYieldSalveList[self.stack.rowIndex].workersIds =
            list[0];
          self.fmData.prsYieldSalveList[self.stack.rowIndex].workersNames =
            list[1];
          self.stack.workerStatus = false;
        },

        //工人选择关闭
        selectWorkerClose() {
          self.stack.workerStatus = false;
        },

        // 删除
        deleteList(index) {
          self.$message({
            message: "删除成功",
            duration: 1000,
          });
          self.fmData.prsYieldSalveList.splice(index, 1);
          self.stack.saveIndex = null;
        },

        //复制
        handleCopy(row) {
          row.uniqueId = "";
          self.fmData.prsYieldSalveList.push({
            ...row,
          });
        },
      };
    },

    //工具
    classUtils() {
      const self = this;
      return {
        //格式化用户输入价格单价小数位数
        formatDecimal(index, data) {
          self.stack.rowIndex = index;

          if (
            self.fmData.prsYieldSalveList[index].badQuantity !== "" &&
            isAccord(self.fmData.prsYieldSalveList[index].badQuantity)
          ) {
            let badQuantity = self.fmData.prsYieldSalveList[index].badQuantity;
            self.fmData.prsYieldSalveList[index].badQuantity = parseFloat(
              badQuantity
            ).toFixed(self.fmConfig.decimalQuantity);
          }
          if (
            self.fmData.prsYieldSalveList[index].quantity !== "" &&
            isAccord(self.fmData.prsYieldSalveList[index].quantity)
          ) {
            let quantity = self.fmData.prsYieldSalveList[index].quantity;
            self.fmData.prsYieldSalveList[index].quantity = parseFloat(
              quantity
            ).toFixed(self.fmConfig.decimalQuantity);
          }
        },

        //格式化数量单价金额小数位数
        getDecimal() {
          if (self.fmData) {
            self.fmData.prsYieldSalveList.forEach((item) => {
              if (
                item.badQuantity !== undefined &&
                item.badQuantity !== null &&
                item.badQuantity !== ""
              ) {
                item.badQuantity = parseFloat(item.badQuantity).toFixed(
                  self.fmConfig.decimalQuantity
                );
              }
              if (
                item.quantity !== undefined &&
                item.quantity !== null &&
                item.quantity !== ""
              ) {
                item.quantity = parseFloat(item.quantity).toFixed(
                  self.fmConfig.decimalQuantity
                );
              }
            });
          }
        },

        //时间格式转换
        inMaterTime(date) {
          let time = new Date(date);
          return (
            time.getFullYear() +
            "-" +
            (time.getMonth() + 1) +
            "-" +
            time.getDate() +
            " " +
            time.getHours() +
            ":" +
            time.getMinutes() +
            ":" +
            time.getSeconds()
          );
        },
      };
    },
  },

  components: {
    selectWorker,
    selectProcess,
  },
};
</script>

<style lang="scss">
.menu-drop-box {
  .el-dropdown-menu__item {
    width: 90px;
    text-align: center;
    position: relative;

    span {
      display: inline-block;
    }

    i {
      position: absolute;
      left: 15px;
      top: 7px;
    }
  }

  .active {
    i,
    span {
      color: #46a6ff;
    }
  }
}

.prs-product-box {
  .mt-box {
    .el-form-item__content {
      line-height: 32px;
    }
    .is-error .box-add {
      border: 1px solid #fc6a6a;
      box-sizing: border-box;
    }
  }
  .box-add {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    width: 210px;
    align-items: center;
    background-color: #f5f7fa;
    border: 1px solid #dfe4ed;
    border-radius: 5px;
    margin-bottom: 2px;
    .el-link {
      height: 20px;
    }

    .el-input__inner {
      width: 145px !important;
      background: none;
      border: none;
      padding-left: 0;
      padding-right: 0;
    }
    .sel-om-code {
      background-color: #f5f7fa;
      border: 1px solid #dfe4ed;
      height: 32px;
      line-height: 32px;
      padding: 0 15px;
      border-radius: 5px;
      width: 175px;
      overflow: hidden;
      span {
        width: 150px;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
      }
    }
  }
  .tran-box {
    width: 310px;
  }
  .hide-box-x {
    transform: translateX(-300px);
    transition: all 0.4s linear;
  }
  .hide-box-w {
    width: 0px;
    transition: width 0.4s linear;
  }
  .hide-box-ox {
    transform: translateX(300px);
    transition: all 0.4s linear;
  }
  .hide-box-ow {
    width: 310px;
    transition: width 0.4s linear;
  }
  .inv-merge {
    background-color: #f5f7fa;
    border: 1px solid #dfe4ed;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    border-radius: 5px;
    width: 210px;
    overflow: hidden;
    -webkit-scrollbar {
      display: none;
    }
    span {
      width: 180px;
      overflow-x: auto;
      display: block;
      white-space: nowrap;
    }
  }
  .prs-data {
    display: flex;
    .data-box {
      display: flex;
      margin-right: 15px;
      align-items: center;
      .el-input__icon {
        line-height: 32px !important;
      }
      .date-l {
        width: 160px !important;
      }
      .el-input__inner {
        padding-left: 30px;
      }
      span {
        font-size: 14px;
        display: inline-block;
        margin-right: 10px;
        flex-shrink: 1;
      }
    }
  }
  .el-textarea__inner {
    font-size: 14px;
    color: #303133;
    padding: 5px 10px !important;
  }

  .quality-box {
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 190px;
      margin: 0 5px;
    }
  }
  .drop-menu {
    position: absolute;
    width: 210px;
    box-shadow: 1px 1px 5px 1px #eee;
    max-height: 500px;
    overflow: auto;
    z-index: 9;
    background: #fff;
    left: 70px;
    top: 35px;
    color: #606266;

    p {
      padding: 10px;
      text-align: center;
      width: 100%;
      color: #606266;
    }

    .menu-close {
      position: sticky;
      top: 0;
      width: 210px;
      text-align: right;
      height: 30px;
      background: #fff;
      line-height: 30px;
      border-bottom: 1px solid #eee;

      .search-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 14px;
          margin-left: 10px;
          color: #606266;
        }
      }

      a {
        padding-right: 10px;
        font-size: 14px;
      }
    }

    .ma-list {
      .list-t {
        text-align: left;
        cursor: pointer;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        padding-top: 5px;
        padding-bottom: 5px;

        &:hover {
          background-color: #f5f7fa;
        }

        .po-content {
          display: flex;
          align-items: center;
        }

        span {
          display: inline-block;
          margin-left: 10px;
          margin-right: 10px;
        }
      }
    }
  }

  .code-red {
    input {
      color: #fc6a6a !important;
    }
  }

  .el-textarea.is-disabled .el-textarea__inner {
    color: #333;
  }

  .input-pp {
    .el-icon-date,
    .el-input__icon {
      line-height: 30px !important;
    }

    .el-input__inner {
      font-size: 13px;
    }
  }

  .code-yellow {
    input {
      color: #e6a23c !important;
    }
  }

  .purchas-information {
    .el-card__body {
      padding: 15px 20px 10px 20px;
    }

    .el-input__inner,
    .el-textarea__inner {
      width: 210px;
    }
  }

  .set-location {
    display: flex;
    align-items: center;

    .location-btn {
      flex-shrink: 1;
      width: 40px;
      margin-right: 5px;
      height: 20px;
    }
  }

  .el-card.is-always-shadow {
    overflow: inherit;
  }

  .blue-red {
    label:nth-of-type(2) {
      .is-checked .el-radio__inner {
        background: #fc6a6a;
        border-color: #fc6a6a;
      }

      .is-checked + .el-radio__label {
        color: #fc6a6a;
      }

      font-size: 20px;
    }
  }

  .unfold-way {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;

    p {
      margin: 0;
      margin-bottom: 8px;
    }
  }

  .con-spec {
    display: flex;
    text-align: center;
    justify-content: center;
    word-wrap: break-word;

    .spec-l {
      padding-right: 2px;

      input {
        text-align: right !important;
      }
    }

    .spec-r {
      input {
        text-indent: 0 !important;
        text-align: left !important;
      }
    }
  }

  .el-radio__input.is-disabled.is-checked .el-radio__inner {
    border-color: #1890ff;
    background: #1890ff;
  }

  .el-radio__input.is-disabled + span.el-radio__label {
    color: #333;
  }

  .info-list {
    // display: flex;
    // justify-content: space-between;
    // align-items: flex-end;

    .articles-numbers {
      margin-bottom: 5px;
      text-align: right;

      a {
        font-size: 14px;
        margin-left: 15px;
        color: #1890ff;

        &:hover {
          opacity: 0.7;
        }
      }
    }

    .wn-in-box {
      display: flex;
    }

    .list-box {
      .box-input {
        display: flex;
        margin-right: 30px;
        align-items: center;
        margin-bottom: 5px;
        position: relative;

        .input-select {
          margin-left: 5px;
        }

        p {
          flex-shrink: 0;
          width: 70px;
          font-size: 14px;
          margin: 0px;
        }

        .el-input {
          width: auto;
          flex: 1;
        }

        .el-textarea {
          width: 100%;
          flex: 1;
        }

        .drop-menu {
          position: absolute;
          width: 212px;
          box-shadow: 1px 1px 5px 1px #eee;
          max-height: 120px;
          overflow: auto;
          z-index: 9;
          background: #fff;
          left: 70px;
          top: 35px;
          color: #606266;

          p {
            padding: 10px;
            text-align: center;
            width: 100%;
            color: #606266;
          }

          .menu-close {
            position: sticky;
            top: 0;
            width: 212px;
            text-align: right;
            height: 30px;
            background: #fff;
            line-height: 30px;
            border-bottom: 1px solid #eee;

            .search-top {
              display: flex;
              justify-content: space-between;
              align-items: center;

              span {
                font-size: 14px;
                margin-left: 10px;
                color: #606266;
              }
            }

            a {
              padding-right: 10px;
              font-size: 14px;
            }
          }

          .ma-list {
            .list-t {
              text-align: left;
              cursor: pointer;
              border-bottom: 1px solid #eee;
              font-size: 14px;
              padding-top: 5px;
              padding-bottom: 5px;

              &:hover {
                background-color: #f5f7fa;
              }

              .po-content {
                display: flex;
                align-items: center;
              }

              span {
                display: inline-block;
                margin-left: 10px;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .el-input.is-disabled .el-input__inner {
      color: #333;
    }

    .blue-color .is-disabled .el-input__inner {
      color: #1890ff;
    }
  }

  .purchas-content {
    margin-top: 10px;

    .el-table--border {
      border-left: 1px solid #dfe6ec;
    }

    .el-textarea__inner {
      border: none;
    }

    .el-textarea.is-disabled .el-textarea__inner {
      background: none;
    }

    .el-table__row td:first-child,
    .has-gutter th:first-child {
      border-left: none;
    }

    .clearfix {
      p {
        margin: 0;
        margin-bottom: 8px;
      }
    }

    .el-card__header {
      padding-right: 20px;
    }

    .el-input__inner {
      height: 31px;
      line-height: 0;
      padding: 0 5px;
      color: #606266;
    }

    .el-input__icon {
      line-height: 0;
    }

    .el-table .cell {
      overflow: inherit;
    }

    .select-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-link {
        width: 28px;
        margin-right: 10px;
      }
      .el-input {
        flex: 1;
      }

      .name-s {
        line-height: 20px;
        margin-left: 5px;
        font-size: 14px;
        margin-right: 5px;
        min-width: 80px;
        flex: 1;
      }
    }

    .el-card__body {
      padding-bottom: 10px;
    }

    .table-data {
      .el-table__body-wrapper {
        overflow: auto;

        .cell {
          height: auto !important;
        }
      }

      .el-table .el-table__header-wrapper th,
      .el-table .el-table__fixed-header-wrapper th {
        height: 35px !important;
      }

      .cell {
        padding: 0;
      }

      .el-input--medium .el-input__inner {
        background: none;
        border-color: #fff;
        border-radius: 0;
        padding: 0;
        text-align: center;
      }

      .el-form-item.is-error .el-input__inner,
      .el-form-item.is-error .el-input__inner:focus,
      .el-form-item.is-error .el-textarea__inner,
      .el-form-item.is-error .el-textarea__inner:focus {
        border-color: #ff4949;
      }

      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background: none;
      }

      .el-table--medium th,
      .el-table--medium td {
        padding: 0 !important;
        text-align: center;
      }

      .el-form-item--medium .el-form-item__content {
        line-height: 30px;
      }

      .add-icon {
        margin-top: 5px;
        text-align: center;
      }
    }

    .el-form-item__error {
      padding-top: 0;
      top: 90%;
    }
  }

  .save-btn {
    margin: 20px;

    button {
      width: 200px;
    }
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .button-plan span {
    display: inline-block;

    button {
      margin-left: 10px;
    }
  }

  .invoice-box {
    background-color: #f5f7fa;
    border-color: #dfe4ed;
    width: 100%;
    padding: 0px 15px;
    height: 32px;
    line-height: 27px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 3px;
    margin-top: 3px;

    span {
      font-size: 14px;
    }
  }

  .text-right {
    input {
      text-align: right !important;
      padding-right: 10px !important;
    }

    span {
      display: inline-block;
      padding-right: 10px;
      width: 100%;
      text-align: right;
    }
  }

  .select-box {
    position: relative;

    .drop-menu1 {
      position: absolute;
      width: 395px;
      box-shadow: 1px 1px 5px 1px #eee;
      max-height: 300px;
      overflow: auto;
      z-index: 9;
      background: #fff;

      .menu-close {
        position: sticky;
        top: 0;
        width: 380px;
        text-align: right;
        height: 30px;
        background: #fff;
        line-height: 30px;

        .search-top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            font-size: 14px;
            margin-left: 10px;
          }
        }

        a {
          padding-right: 10px;
        }
      }

      .ma-list {
        margin-bottom: 10px;

        .list-t {
          text-align: left;
          cursor: pointer;
          border-bottom: 1px solid #eee;
          font-size: 14px;

          &:hover {
            background-color: #f5f7fa;
          }

          span {
            display: inline-block;
            margin-left: 10px;
            margin-right: 10px;
          }
        }
      }
    }
  }

  .matrial-box .basicfile-box .cell {
    height: auto !important;
  }

  .el-card__header {
    padding-right: 20px;
  }
}
</style>
